<meta name="viewport" content="width=device-width" />
<style>
*{
  margin:0px;
  padding:0px;
}
html,body,.cal{
  width:100%;
  height:100%;
  background:black;
}
.cal{
  display:flex;
  flex-direction:column;
}
.result{
  flex:3;
  background:black;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  font-size:80px;
  color:pink;
  padding-right:10px;
}
.btns{
  flex:7;
  background:pink;
  display:flex;
  flex-wrap:wrap;
}
.btn{
  transition:all .6s;
  width:25%;
  display:felx;
  justify-content:center;
  align-items:center;
  font-size:35px;
  color:black;
  border-right:1px solid black;
  box-sizing:border-box;
  border-bottom:1px solid black;
  text-align:center;
}
.btn0{
  width:50%;
}
.btn:hover{
  background:white;
  color:black;
}
</style>

<div class="cal">
  <div class="result" id="result">0</div>

  <div class="btns">
    <div class="btn" onclick="ql()">AC</div>
    <div class="btn">%</div>
    <div class="btn"onclick="chu()">/</div>
    <div class="btn">Del</div>

    <div class="btn" onclick="show7()">7</div>
    <div class="btn" onclick="show8()">8</div>
    <div class="btn" onclick="show9()">9</div>
    <div class="btn" onclick="cheng()">*</div>

    <div class="btn" onclick="show4()">4</div>
    <div class="btn" onclick="show5()">5</div>
    <div class="btn" onclick="show6()">6</div>
    <div class="btn" onclick="jian()">-</div>

    <div class="btn" onclick="show1()">1</div>
    <div class="btn" onclick="show2()">2</div>
    <div class="btn" onclick="show3()">3</div>
    <div class="btn" onclick="jia()">+</div>

    <div class="btn btn0" onclick="show0()">0</div>
    <div class="btn">.</div>
    <div class="btn" onclick="jiSuan()">=</div>
  </div>
</div>

<script>

function show0(){
    result.innerHTML +=0;
}  

function show1(){
  if(result.innerHTML ==0){
    result.innerHTML =1;
  }else{
    result.innerHTML +=1;
  }
}  

function show2(){
  if(result.innerHTML ==0){
    result.innerHTML =2;
  }else{
    result.innerHTML +=2;
  }
} 

function show3(){
  if(result.innerHTML ==0){
    result.innerHTML =3;
  }else{
    result.innerHTML +=3;
  }
}   

function show4(){
  if(result.innerHTML ==0){
    result.innerHTML =4;
  }else{
    result.innerHTML +=4;
  }
}  

function show5(){
  if(result.innerHTML ==0){
    result.innerHTML =5;
  }else{
    result.innerHTML +=5;
  }
}  

function show6(){
  if(result.innerHTML ==0){
    result.innerHTML =6;
  }else{
    result.innerHTML +=6;
  }
}  

function show7(){
  if(result.innerHTML ==0){
    result.innerHTML =7;
  }else{
    result.innerHTML +=7;
  }
}  

function show8(){
  if(result.innerHTML ==0){
    result.innerHTML =8;
  }else{
    result.innerHTML +=8;
  }
}  

function show9(){
  if(result.innerHTML ==0){
    result.innerHTML =9;
  }else{
    result.innerHTML +=9;
  }
}  


function ql(){
var num;s
  if(result.value==num){
  result.value==0;
}else{
  result.value==0;
}
}

</script>